<template>
  <div class="wallet_wrap">
    <div class="walletCompoent" v-if="$route.name === 'myWallet'">
      <div class="topHalf">
        <div class="wallet">
          <div class="walletIco">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yue" />
            </svg>
          </div>
          <div class="walletPrice">
            <span>&yen;&nbsp;&nbsp;</span>
            <span>{{ balance }}</span>
          </div>
        </div>
      </div>
      <div class="bottomHalf">
        <van-cell-group>
          <van-cell
            :title="$t('profile.charge')"
            is-link
            icon="gold-coin"
            :to="{ name: 'wallet-pay' }"
          ></van-cell>
        </van-cell-group>
        <van-cell-group>
          <van-cell
            :title="$t('profile.draw')"
            is-link
            icon="card"
            :to="{ name: 'wallet-draw' }"
          ></van-cell
        ></van-cell-group>
        <van-cell-group>
          <van-cell
            :title="$t('profile.billRecords')"
            is-link
            icon="balance-list"
            :to="{ name: 'record' }"
          ></van-cell
        ></van-cell-group>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import { CellGroup, Cell } from 'vant';
export default {
    name: 'wallet',
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup
    },
    data () {
        return {
            balance: 0
        };
    },
    // watch中不能用arrow function，因为this指向会不明确，
    watch: {
        $route: {
            handler: function () {
                this.$api.userApi
                    .getMoney({ _id: localStorage.getItem('id') })
                    .then(result => {
                        this.balance = result.balance;
                        this.$store.commit('overRideValue', {
                            state: 'userInfo',
                            value: {
                                balance: this.balance
                            }
                        });
                    });
            },
            immediate: true
        }
    }
};
</script>

<style scoped lang="less" src="./less/wallet.less"></style>
